<!--
 @author: zgg (作者)
 @create: 2021-08-30 更改日期
   -->

<template>
	<div class="app-container">
		<el-dialog :title="form.id ? '编辑居委用户' : '添加居委用户' " :visible.sync="dialogVisible" width="1200px" top="30px" :before-close="handleClose">
			<div class="ad-user-form-div">
				<div style="width: 40%;">
					<el-form ref="form"  :model="form" :label-position="labelPosition" label-width="100px" style="width: 100%;">
						<!-- 为了解决默认读取页面账户密码的问题(START) -->
						<div class='zc_display'>
						  <el-input type="text" />
						  <el-input type="password" />
						</div>
						<!-- 为了解决默认读取页面账户密码的问题(END) -->
						<el-form-item label="用户头像" :required="true">
							<div v-if="!form.image" class="up-img" @click="upImg"><i class="el-icon-plus" /></div>
							<img v-else class="up-img" width="100%" :src="form.image + '?imageView2/1/w/150/h/150'" alt="" @click="upImg" />
						</el-form-item>
						<el-form-item label="账号"  :required="true" ><el-input style="width: 100%;" v-model="form.username" class="form-input" placeholder="请输入手机号" /></el-form-item>
						<el-form-item label="姓名"  :required="true" ><el-input style="width: 100%;" v-model="form.real_name" class="form-input" placeholder="请输入真实姓名" /></el-form-item>
						<el-form-item label="密码" v-if="!form.id" :required="true" ><el-input style="width: 100%;" v-model="form.password" class="form-input" type="password" placeholder="请输入密码" /></el-form-item>
						<el-form-item label="邮箱地址"  ><el-input style="width: 100%;" v-model="form.mailbox" class="form-input" placeholder="请输入邮箱" /></el-form-item>
						
						<el-form-item label="管理员类型"  :required="true"  >
							 <el-radio-group v-model="form.user_type" >
							    <el-radio label="3">居委管理员</el-radio>
							    <el-radio label="4">居委成员</el-radio>
							  </el-radio-group>
						</el-form-item>
						<el-form-item label="物业公司"  :required="true">
							<el-select v-model="form.wuye_id" style="width: 100%;" placeholder="请选择" clearable @change="loadXiaoQuList()">
								<el-option :label="item.wy_name" :value="item.id" v-for="(item, index) in wuyeList" :key="index"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="居委名称"  :required="true">
							<el-input style="width: 100%;" v-model="form.juwei_name" class="form-input" placeholder="请输入居委名称" />
						</el-form-item>
						<el-form-item label="管理小区"  :required="true">
							<el-select style="width: 100%;" multiple  v-model="department_id_str" clearable filterable placeholder="请选择小区" @change="changeXiaoQu()">
								<el-option v-for="(item, i) in xiaoquList" :key="i" :label="item.xq_name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
						
						<el-form-item label="用户权限组"  :required="true" v-if="form.wuye_id">
							<el-checkbox-group v-model="form.role_ids" >
								<el-checkbox v-for="(item, index) in roles" :key="index" :label="item.id">{{ item.name }}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
					
						<el-form-item label="用户状态" prop="state">
							<el-switch
								v-model="form.state"
								class="ad-user-switch"
								inactive-color="#aaa"
								inactive-text="禁用"
								inactive-value="2"
								active-color="#5FB878"
								active-text="启用"
								active-value="1"
								:width="52"
								@change="change"
							/>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit">保存</el-button>
							<el-button @click="handleClose">返回</el-button>
						</el-form-item>
					</el-form>
				</div>
				<div style="width: 40%;margin-left: 50px;">
				<!-- <div style="width: 40%;margin-left: 50px;" v-show="form.xiaoqu_id&&form.user_type==2"> -->
					<my-role  ref="role" :ids="app_rel_ids" ></my-role>  
				</div>
				
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { validPhone, validEmail } from '@/utils/validate';
import { save, checkName } from '@/api/admin-manage';
import Api from '@/api/pages/wuye/user.js';
import wuyeApi from '@/api/pages/wuye/wuye.js';
import myRole from './role.vue'
export default {
	name: 'wuyeAddUser',
	components:{myRole},
	props:['item'],
	data() {
		return {
			dialogVisible: true,
			form: {
				id:'',
				image: '', // 头像
				username: '', // 用户名
				password: '', // 密码
				real_name: '', // 真实姓名
				mailbox: '', // 邮箱
				// essc_no: '',//社保卡号
				state: '1', // 启用状态(1启用，2禁用)
				role_ids: [] ,// 权限组id
				wuye_id:'',
				codeIds:[],
				xiaoqu_id:'',
				user_type:'1'
			},
			id: '',
			checkRoles: [],
			roles: [],
			labelPosition: 'right', // label对齐方式，可选值为right、top、left
			xiaoquList: [],
			wuyeList:[],
			codeLsit:[],//应用权限组
			app_rel_ids:[],
			department_id_str:[],
		};
	},
	mounted() {
		if(this.item.id) {
			this.getUserInfo();
		}
		this.getWuyeList();
		this.findByAllXiaoQu();
	},
	methods: {
		
		
		setForm() {
			if(this.item) {
				this.form = {
					id:this.item.id,
					image: this.item.headimg, // 头像
					username: this.item.username, // 用户名
					juwei_name: this.item.juwei_name||'', // 居委名
					real_name:  this.item.real_name, // 真实姓名
					mailbox:  this.item.mailbox, // 邮箱
					state: this.item.state+ '', // 启用状态(1启用，2禁用)
					role_ids:[],
					wuye_id:this.item.wuye_id,
					xiaoqu_id:this.item.xiaoqu_id,
					user_type:this.item.user_type + '',
				}
				this.department_id_str = [];
				if(this.item.department_id_str){
					let department_id_str = this.item.department_id_str.split(",")||[];
					department_id_str.forEach(d => {
						this.department_id_str.push(Number(d));
					});
					console.log(this.department_id_str)
				}
			}
			this.loadXiaoQuList(this.item.xiaoqu_id,this.item.role_id);
		},
		getUserInfo() {
			Api.getUserInfo({ 
				id:this.item.id,
				wuye_id:this.item.wuye_id
			}).then(res => {
				if (res.state) {
					this.setForm();
					this.department_id_str = [];
					if(res.data.admin.department_id_str){
					let department_id_str = res.data.admin.department_id_str.split(",")||[];
					department_id_str.forEach(d => {
						this.department_id_str.push(Number(d));
					});
					console.log("this.department_id_str",this.department_id_str)
				}
					this.app_rel_ids = res.data.app_rel_ids || [];
					this.form.role_ids = res.data.roleIds || [];
				} else {
					this.saveUser(data);
				}
			});
		},
		// 获取物业公司
		getWuyeList() {
			wuyeApi.getWuyeList().then(res => {
				if (res.state) {
					this.wuyeList = res.data;
				} else {
					this.$message(res.msg);
				}
			});
		},
		// 获取所有小区
		findByAllXiaoQu() {
			Api.findByAllXiaoQu().then(res => {
				if (res.state) {
						this.xiaoquList = res.data;
				} else {
					this.$message(res.msg);
				}
			});
		},
		// 获取小区
		loadXiaoQuList(xiaoqu_id) {
			if(this.form.wuye_id) {
				Api.loadXiaoQuList({
					wyId:this.form.wuye_id
				}).then(res => {
					if (res.state) {
						this.form.xiaoqu_id = xiaoqu_id || '';
						this.xiaoquList = res.data.WuyeXiaoquList;
						this.roles = res.data.roles;
						// if(xiaoqu_id) {
						// 	this.$refs.role.getAppList(xiaoqu_id);
						// }
					} else {
						this.$message(res.msg);
					}
				});
			}else{
				this.xiaoquList = [];
				this.roles = [];
				this.form.role_ids = [];
				this.form.xiaoqu_id = '';
			}
		},
		handleClose() {
			 this.$parent.isAdd = false;
		}, 
		//如果要eslint验证，请把这段代码删掉
		/* eslint-disable */ 
		searchHouseList() {
			searchHouseList({}).then(res => {
				if (res.state) {
					this.xiaoquList = res.data;
					if (this.xiaoquList.length) {
					}
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		// 创建
		onSubmit() {
			if (!this.form.image) {
				this.$message.error('请上传用户头像!');
				return;
			}
			if (!this.form.username) {
				this.$message.error('账号不能为空!');
				return;
			}
			if (!validPhone(this.form.username)) {
				this.$message.error('账号格式必须是手机号!');
				return;
			}
			if (!this.form.password && !this.form.id) {
				this.$message.error('密码不能为空!');
				return;
			}
			if (!this.form.real_name) {
				this.$message.error('姓名不能为空!');
				return;
			}
			
			if (!this.form.wuye_id) {
				this.$message.error('请选择物业!');
				return;
			}
			if (!this.form.juwei_name) {
				this.$message.error('请输入居委名称!');
				return;
			}
			if (!this.department_id_str.length) {
			    this.$message.error('请选择管理小区!')
			    return
			}
			if (!this.form.role_ids.length) {
				this.$message.error('请选择用户权限!');
				return;
			}
			let data = {};
			data['admin.id'] = this.form.id;
			data['admin.headimg'] = this.form.image;
			data['admin.username'] = this.form.username;
			data['admin.password'] = this.form.password;
			data['admin.real_name'] = this.form.real_name;
			data['admin.mailbox'] = this.form.mailbox;
			data['admin.state'] = this.form.state;
			data['admin.wuye_id'] = this.form.wuye_id;
			data['admin.xiaoqu_id'] = this.department_id_str[0];
			data['user_type'] = this.form.user_type;
			data['role_id'] = this.form.role_ids.join(',');
			// data['role_id'] = '21';//三驾马车 居委
			// data['role_id'] = '20';//测试 居委
			data['set_app_info'] = JSON.stringify(this.$refs.role.confirmRole())
			data['admin.department_id_str'] = this.department_id_str.join(",");
			data['admin.juwei_name'] = this.form.juwei_name;
		 
			if(this.form.id) {
				this.saveUser(data);
			}else{
				Api.checkname({ value: this.form.username }).then(res => {
					if (res) {
						this.$message.error('账号已存在,请更换账号!');
					} else {
						this.saveUser(data);
					}
				});
			}
		},

		// 保存用户信息函数
		saveUser(data) {
			Api.wuyeJwUserSaveNew(data).then(res => {
				if (res.state) {
					this.$message({ message: res.msg, type: 'success', duration: 1000 });
					this.$parent.getData();
					this.$parent.isAdd = false;
				} else {
					this.$message.error(res.msg);
				}
			});
		},

		// 上传头像
		upImg() {
			// 上传单个文件
			this.hhFolder({
				max: 1,
				filter: 'image',
				thumb_w: 500,
				thumb_h: 250,
				success: files => {
					this.form.image = files[0].url;
				}
			});
		},
		// 状态改变
		change(val) {
			// console.log(val)
			this.form.state = val;
		},
		// 选择小区
		changeXiaoQu() {
			this.app_rel_ids = []; 
			// this.$refs.role.getAppList(this.form.xiaoqu_id);
		}
	}
};
</script>

<style lang="scss" scoped>
.app-container {
	border: 1px solid #f2f2f2;
	border-radius: 3px;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	background: #fff;

	.admin-title {
		font-size: 16px;
		color: #333;
		padding: 15px;
		border-bottom: 1px solid #f2f2f2;
	}

	.ad-user-form-div {
		display: flex;
		
		padding: 16px 40px;

		.up-img {
			background-color: #fbfdff;
			border: 1px dashed #c0ccda;
			border-radius: 6px;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			width: 100px;
			height: 100px;
			cursor: pointer;
			line-height: 100px;
			vertical-align: top;
			display: flex;
			justify-content: center;
			align-items: center;

			.el-icon-plus {
				font-size: 28px;
				color: #8c939d;
			}
		}

		.up-img:hover {
			border: 1px dashed #409eff;
		}

		.form-input {
			width: 220px;
		}
	}
}
</style>

<style lang="scss">
// element-ui样式修改
// 表单修改
.ad-user-form-div {
	label {
		font-weight: 500;
	}

	.el-form-item__label {
		text-align: right;
		vertical-align: middle;
		float: left;
		font-size: 15px;
		color: #333;
		line-height: 40px;
		padding: 0 12px 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	// .el-form-item--medium .el-form-item__label{
	//   line-height: 36px;
	// }
	// .el-form-item--small .el-form-item__label{
	//   line-height: 32px;
	// }
	// .el-form-item--mini .el-form-item__label{
	//   line-height: 28px;
	// }
}

// switch按钮修改
.ad-user-switch {
	.el-switch__label {
		position: absolute;
		display: none;
		color: #fff;
	}

	/*打开时文字位置设置*/
	.el-switch__label--right {
		z-index: 1;
		left: -6px;
	}

	/*关闭时文字位置设置*/
	.el-switch__label--left {
		z-index: 1;
		right: -5px;
	}

	/*显示文字*/
	.el-switch__label.is-active {
		display: block;
	}
}
</style>
